<template>
  <div id="cesiumContainer" class="cesium-container">
    <div class="button-container">
      <!-- 点击该按钮将触发addSatellitesData方法，用于加载官网卫星数据 -->
      <button @click="addSatellitesData" class="cesium-button">官网</button>
      <!-- 点击该按钮将触发addSatellitesData2方法，用于加载后端数据 -->
      <button @click="addSatellitesData2" class="cesium-button">后端</button>
      <!-- 点击该按钮将触发resetData方法，用于重置数据，移除所有已加载的数据源 -->
      <button @click="resetData" class="cesium-button">重置</button>
    </div>
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
import axios from 'axios';

/**
 * 设置 Cesium Ion 的访问令牌
 */
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MTNlOWJkNy01NTU0LTQ3ZWQtYmM3Yi1mNGViODFhOGY3NzQiLCJpZCI6MjgwODczLCJpYXQiOjE3NDEwNzIwNTl9.v7K25kZiBHwarMikqFQEH-NROT27E4JjdsmpUULH4J0";

let viewer = null;

/**
 * 添加官网卫星数据到 Cesium Viewer 中
 * 该方法会加载指定的 CZML 文件，并将相机视角返回到初始位置
 */
const addSatellitesData = () => {
  if (viewer) {
    // 加载位于 public/models 目录下的 simple.czml 文件
    Cesium.CzmlDataSource.load('/models/simple.czml')
      .then((dataSource) => {
        console.log('成功加载官网提供的 CZML 数据:', dataSource.entities.values);
        // 将数据源添加到 Viewer 的数据源中
        return viewer.dataSources.add(dataSource);
      })
      .catch((error) => {
        console.error('加载官网 CZML 数据时出错:', error);
      });

    // 将相机视角返回到初始位置
    viewer.camera.flyHome(0);
  }
};

/**
 * 添加后端czml数据到 Cesium Viewer 中
 * 该方法会加载指定的 CZML 文件
 */
const addSatellitesData2 = async () => {
  if (viewer) {
    try {
      // 加载后端数据
      const cData2 = await axios.get("http://localhost:8080/j2000-orbit-czml2");
      console.log('加载后端 CZML 数据:', cData2.data);
      const dataSource = await Cesium.CzmlDataSource.load(cData2.data);
      viewer.dataSources.add(dataSource);
    } catch (error) {
      console.error('加载后端 CZML 数据时出错:', error);
    }
  }
};

/**
 * 重置 Cesium Viewer 中的数据
 * 该方法会移除所有已加载的数据源
 */
const resetData = () => {
  if (viewer) {
    viewer.dataSources.removeAll();
  }
};

/**
 * 组件挂载后执行的初始化操作
 * 创建 Cesium Viewer 实例，并将其赋值给 viewer 变量
 */
onMounted(() => {
  // 创建一个 Cesium Viewer 实例，绑定到 ID 为 cesiumContainer 的 DOM 元素上
  // 设置 shouldAnimate 为 true，启用动画效果
  viewer = new Cesium.Viewer("cesiumContainer", {
    shouldAnimate: true
  });
});
</script>

<style scoped>
.cesium-container {
  position: relative;
}

.button-container {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
  z-index: 100;
}

.cesium-button {
  padding: 10px 20px;
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: rgba(249, 249, 249, 0.5);
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cesium-button:hover {
  background-color: #eaeaea;
}
</style>    